beautifyDateTime()<!-- home -->
<template>
  <div>
    <top-bar>
      <span slot="topText" class="top-text">运动锻炼</span>
    </top-bar>
    <van-field
      v-model="sportTypeName"
      label="运动类型"
      placeholder="请选择运动类型"
      :readonly="true"
      is-link
      @focus="showSportType=true"
      :rules="[{ required: true, message: '请选择运动类型' }]"
    />
    <van-pull-refresh v-model="pullLoading" @refresh="resetSearch">
      <van-list
        v-model="pushLoading"
        :finished="finished"
        finished-text="没有更多了"
        :offset="10"
        @load="onLoad"
      >
      <van-cell-group v-for="(item, index) in dataList" :key="index" >
        <van-swipe-cell>
          <template #left>

          </template>
          <van-cell center is-link :to="{ name:'SportExerciseEdit',params: {id:item.id} }">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #icon>
              <svg-icon icon-class="sport" className="icon-list" />
            </template>
            <template #title>
              <span class="custom-title">{{item.sportType.name}}</span>
            </template>
            <template #default>
              <van-tag type="danger" v-if="item.minutes<60">短</van-tag>
              <span class="van-ellipsis">{{item.minutes}}分钟</span>
            </template>
          </van-cell>
          <template #right>
            <van-button square type="danger" text="删除"  @click="handleDelete(item.id)" />
          </template>
        </van-swipe-cell>
        <van-cell center class="custom-cell" title="锻炼时间" :value="beautifyDateTime(item.exerciseDate)" />
        <van-cell center class="custom-cell" title="锻炼数值">
          <template #default>
            <van-tag type="success" v-if="'CURRENT' ==item.fastBest">当前最佳</van-tag>
            <van-tag type="success" v-if="'ONCE' ==item.fastBest">历史最佳</van-tag>
            <span class="van-ellipsis">{{item.kilometres+item.sportType.unit}}</span>
          </template>
        </van-cell>
        <van-cell :value="item.remark" value-class="desc-class" />
        <van-row type="flex" justify="center">
          <van-col span="8" style="text-align: center;">
            <van-button plain class="app-menu-color" size="small" icon="add-o" @click="handleCreateFormTmp(item.exerciseDate)" style="width: 100%;">以该天为模板</van-button>
          </van-col>
          <van-col span="8" style="text-align: center;">
            <van-button plain class="app-menu-color" size="small" icon="edit" :to="{ name:'SportExerciseEdit',params: {id:item.id} }" style="width: 100%;">修改</van-button>
          </van-col>
          <van-col span="8" style="text-align: center;">
            <van-button plain class="app-menu-color" size="small" icon="delete-o" @click="handleDelete(item.id)" style="width: 100%;">删除</van-button>
          </van-col>
        </van-row>
      </van-cell-group>
      </van-list>
    </van-pull-refresh>
    <van-button round block type="primary" class="btn-block" :to="{ name:'SportExerciseAdd',params: {} }" >
        新增
    </van-button>
    <van-action-sheet v-model="showSportType" :actions="sportTypeOptions" @select="onSelectSportType" />
    <!--回到顶部-->
    <back-to-top bottom="60px" right="10px">
      <van-button round block type="primary" size="small" class="app-color" icon="back-top">
      </van-button>
    </back-to-top>
  </div>
</template>

<script>
  import { fetchList,deleteSportExercise } from '@/api/sport/sportExercise'
  import { getSportTypeTree } from '@/api/sport/sportType'
  import { Col,Row,List,PullRefresh,Tag,Dialog,SwipeCell,Icon,Notify,ActionSheet,Field  } from 'vant';
  import TopBar from "components/TopBar";
  import { formatDateDesc,formatSeconds } from '@/utils/datetime'

export default {
  name:'SportExercise',
  components: {
    TopBar,
    [Col.name]: Col,
    [Row.name]: Row,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Tag.name]: Tag,
    [Icon.name]: Icon,
    [Dialog.Component.name]: Dialog.Component,
    [Notify.Component.name]: Notify.Component,
    [SwipeCell.name]: SwipeCell,
    [ActionSheet.name]:ActionSheet,
    [Field.name]:Field
  },
  data() {
    return {
      //下拉刷新使用
      pullLoading:false,
      //列表上拉的刷新使用
      pushLoading: false,
      finished: false,
      //当前页，是第一次加载是van-list的onLoad触发，所以为0
      para:{
        page:0,
        //搜索关键字
        sportTypeId:undefined,
        pageSize:10,
        needTotal:false,
        sortField:'EXERCISEDATE',
        sortType:'desc'
      },
      dataList:[],
      //运动类型搜索
      sportTypeName:undefined,
      showSportType:false,
      sportTypeOptions:[]
    }
  },
  computed: {

  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const r = to.params.r;
      if(true==r){
        //console.log('来自编辑成功页面，刷新，name:'+from.name);
        /**
         * 在beforeRouteEnter时，页面还没有渲染，新进入组件还没有被创建，无法获取this实例
         * 通过“vm”访问组件实例`,可以通过vm.name去访问data里面的name属性，跟this.name一样效果
         * */
        vm.resetSearch();
      }
    })
  },
  activated() {
  },
  mounted() {
    this.initSelectOptions();
    //this.getMessageList();
  },
  methods: {
    //初始化下拉列表
    initSelectOptions(){
      getSportTypeTree(null).then(response => {
        this.sportTypeOptions = new Array();
        this.sportTypeOptions.push({id:null,name:'全部'});
        this.sportTypeOptions = this.sportTypeOptions.concat(response);
      });
    },
    /**运动类型选择确定*/
    onSelectSportType(item){
      this.sportTypeName = item.name;
      this.para.sportTypeId = item.id;
      this.showSportType = false;
      this.handleSearch();
    },
    /**以模板信息*/
    handleCreateFormTmp(exerciseDate){
      let templateDate = exerciseDate.substr(0,10);
      this.$router.push({ name: 'SportExerciseAddFromTmp', params: { templateDate: templateDate }})
    },
    /**搜索*/
    handleSearch(){
      this.reset();
      this.getDataList();
    },
    /**重置搜索*/
    resetSearch(){
      this.reset();
      this.getDataList();
    },
    /**重置*/
    reset() {
      this.pullLoading = false;
      this.dataList = [];
      this.para.page=1;
      this.finished = false;
    },
    /**获取数据列表*/
    getDataList() {
      this.pushLoading = true;
      fetchList(this.para).then(response => {
        this.pushLoading = false;
        this.dataList = this.dataList.concat(response.rows);
        if(response.rows.length==0){
          this.finished = true;
        }
      }).catch(() => {
      });
    },
    /**删除消息*/
    handleDelete(id) {
      Dialog.confirm({
        title: '确认删除?',
        message: '您是否要删除该条记录?',
      }).then(() => {
        //确认
        deleteSportExercise(id).then(response => {
          Notify({ type: 'success', message: '删除成功' });
          this.resetSearch();
        })
      }).catch(() => {
        //取消
      });
    },
    /**下拉刷新*/
    onLoad(){
      this.para.page+=1;
      this.getDataList();
    }
  }
}
</script>
